
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Query</title>
    <style type="text/css">
        body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
        #tabs { margin:0; padding:0; list-style:none; overflow:hidden; background-color: #000; background: white url(bg.gif) repeat-x left top; }
        #tabs li { float:left; display:block; padding:5px; margin-right:1px;}
        #tabs li a { color:#FFFFFF; text-decoration:none; }
        #tabs li.current { background-color:#FFFFFF;}
        #tabs li.current a { color:#000000; text-decoration:none; }
        #tabs li a.remove { color:#FFFFFF; margin-left:10px;}
        #tabs li.current a.remove { color:#000000; margin-left:10px; }
        #content { background-color:#FFFFFF;}
        .frame-box{height: 1900px;}
        #content p { margin: 0; padding:20px 20px 100px 20px;}
        #main { width:100%; margin:0px auto; overflow:hidden;;}
        #doclist ul { margin:0; list-style:none;}
        #doclist li { margin:10px 0; padding:0;}

        /*#wrapper { width:700px; margin-top:20px;}*/
        #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}

    </style>

    <script type="text/javascript" src="jquery-1.4.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var tab_index = 1;
            $("#new").click(function() {
                addTab('Tab'+tab_index);
                tab_index = tab_index+1;
            });

            $('#tabs a.tab').live('click', function() {
                // Get the tab name
                var contentname = $(this).attr("id") + "_content";

                // hide all other tabs
                $("#content div.frame-box").hide();
                $("#tabs li").removeClass("current");

                // show current tab
                $("#" + contentname).show();
                $(this).parent().addClass("current");
            });

            $('#tabs a.remove').live('click', function() {
                // Get the tab name
                var tabid = $(this).parent().find(".tab").attr("id");

                // remove tab and related content
                var contentname = tabid + "_content";
                $("#" + contentname).remove();
                $(this).parent().remove();

                // if there is no current tab and if there are still tabs left, show the first one
                if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                    // find the first tab    
                    var firsttab = $("#tabs li:first-child");
                    firsttab.addClass("current");

                    // get its link name and show related content
                    var firsttabid = $(firsttab).find("a.tab").attr("id");
                    $("#" + firsttabid + "_content").show();
                }
            });
        });
        function addTab(link_id) {
            // hide other tabs
            $("#tabs li").removeClass("current");
            $("#content div.frame-box").hide();

            // add new tab and related content
            $("#tabs").append("<li class='current'><a class='tab' id='" +link_id+ "' href='#'>"+link_id+"</a><a href='#' class='remove'>&#x2718;</a></li>");

            $("#content").append("<div class='frame-box' id='" + link_id+ "_content'>" +
                    "<iframe style='width:100%; height:100%; zoom:0.6;' src='<?php echo $_GET['url'];?>' border='0' frameborder='0' vspace='0' hspace='0'" +
            " marginheight='0' marginwidth='0' allowtransparency='true'></iframe></div>");

            // set the newly added tab as current
            $("#" + link_id + "_content").show();
        }
    </script>
</head>
<body>
<div id="main">
    <div id="wrapper">
        <ul id="tabs">
            <!-- Tabs go here -->
            <input type="button" id="new" value="+" style="border: none; background: transparent; color: #FFFFFF; font-size: 20px; width: 40px; cursor: pointer;"/>
        </ul>
        <div id="content">
            <!-- Tab content goes here -->
        </div>
    </div>
</div>
</body>
</html>
